<template>
    <dd-flex gap="1em">
        <dd-button v-for="index in indexs" @click="select(index)" plain>{{ index }}</dd-button>
    </dd-flex>
    <dd-divider></dd-divider>
    <dd-menu ref="menu">
        <dd-item>item1</dd-item>
        <dd-item>item2</dd-item>
        <dd-menu label="subMenu">
            <dd-item>subMenu-item1</dd-item>
            <dd-item>subMenu-item2</dd-item>
        </dd-menu>
        <dd-menu>
            <template #label>label</template>
            <dd-item>subMenu-item1</dd-item>
            <dd-item>subMenu-item2</dd-item>
        </dd-menu>
    </dd-menu>
</template>

<script setup lang="ts">
import { DdMenu } from "ddong-ui";
import { ref } from "vue";

const indexs = ["0-0", "0-1", "0-2-0", "0-2-1", "0-3-0", "0-3-1"];

const menu = ref<InstanceType<typeof DdMenu>>();
function select(index: string) {
    menu.value?.select(index);
}
</script>
